<template>
  <div >
      <el-form   class="form"
        label-position="left"  :model="form"
        :rules="rules"  ref="form">
        <el-form-item prop="user_name" label="昵称" style="width:100px">
          <el-input  v-model="form.user_name" style="width:400px"
            placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item prop="user_phone" label="电话号码" style="width:100px">
          <el-input  v-model="form.user_phone" style="width:400px"
            type="text" placeholder="请输入电话号码"></el-input>
        </el-form-item>
        <el-form-item prop="user_pwd" label="密码" style="width:100px">
          <el-input  v-model="form.user_pwd" style="width:400px"
            type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="user_email" label="邮箱" style="width:100px">
          <el-input  v-model="form.user_email" placeholder="请输入邮箱" style="width:400px"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary"  label-position="right" @click="reg()">添加</el-button>
          <el-button  >返回</el-button>
        </el-form-item>      
      </el-form>
    </div>
</template>

<script>
import myaxios from '../../http/Myaxios'
export default {
    data() {
        return {
            form: {
                user_pwd:'',
                user_phone:'',
                user_name:'',
                user_email:'',
            },
            rules:{
              user_phone: [
                  { required: true, message: "请填写用户名", trigger: "blur" },
                  {
                    pattern: /^1[3-9][0-9]{9}$/,
                    message: "手机号格式错误!",
                    trigger: "blur",
                  },
              ],
              user_pwd: [
                { required: true, message: "请填写密码", trigger: "blur" },
                {
                  pattern: /^\w{6,15}$/,
                  message: "6~15位字符，可以包含：数字、字母、下划线",
                  trigger: "blur",
                },
              ],
            }
        }
    },
    methods:{
      reg(){
        this.$refs['form'].validate(valid=>{
          if(valid){
            console.log('form',this.form);
            let params=this.form
            myaxios.post('http://localhost:3500/user-add',params).then(res=>{
              console.log('返回:',res);
              if (res.data.code ===200) {
                this.$refs['form'].resetFields()
                this.$message({
                  message:'添加成功!',
                  type:'success'
                })
              } else {
                console.log('错误!',res);
              }
            })
            
          } else {
            this.$message({type:'danger',message:'验证失败,请修改表单'})
          }
         
        })
        
      }
    }
};
</script>

<style lang="scss" scoped></style>
